import React, { useState } from "react";
import { SettingOutlined } from "@ant-design/icons";
import { SketchPicker } from "react-color";
import styles from "@/styles/ThemePicker.less";
import classNames from "classnames";
export default function ThemePicker() {
  const [switcherOn, setSwitcherOn] = useState(false); //颜色面板

  const handleChangeComplete = (color: any) => {
    document.body.style.setProperty("--primary-color", color.hex);
  };
  const handleClick = () => {
    setSwitcherOn(!switcherOn);
  };
  return (
    <div className={classNames(styles["switcher"])}>
      <span onClick={handleClick}>
        <SettingOutlined />
      </span>
      <div className={classNames(!switcherOn && styles.picker)}>
        <SketchPicker color="#313653" onChangeComplete={handleChangeComplete} />
      </div>
    </div>
  );
}
